<template>
  <div>
    <nav-bar title="进度报表"></nav-bar>
    <div class="realTimeStatistical maxinBox">
      <div class="marginTop5 plr10 backgroundfff">
        <van-row>
          <van-col :span="24" class="title">
            <div>
              项目实施进度表
            </div>
          </van-col>
        </van-row>
        <my-echarts id="myChat" :options="chatData"></my-echarts>
      </div>
    </div>
  </div>
</template>

<script>
  import MyEcharts from '../components/echart.vue'
  import scheduleManageAPI from '../../../../api/workAPI/scheduleManage.js'
  export default {
    components: {
      MyEcharts
    },
    data() {
      return {
        chatData: null
      }
    },
    methods:{
      getData() {
        let projectId = localStorage.getItem('projectId')
        let chartData = []
        scheduleManageAPI.getChartData(projectId).then(res => {
          res.map(item => {
            chartData.push({
              name: `${item.projectModel}(${item.days})`,
              start: item.startDateTime,
              end: item.endDateTime,
              status: item.status
            })
          })
          this.chatData =  {
            title: {
              text: "项目进度报表",
              left: 10,
            },
            grid: {
              containLabel: true,
              left: 20,
            },
            xAxis: {
              type: "time",
              position: "top",
            },
            yAxis: [
              {
                data: chartData.map((item) => item.name),
              },
            ],
            tooltip: {
              trigger: "axis",
              formatter: function (params) {
                // var res = params[0].name + '</br>'
                var res = "节点周期:" + "</br>";
                var date0 = params[0].data;
                var date1 = params[1].data;
                // date0 = date0.getFullYear() + '-' + (date0.getMonth() + 1) + '-' + date0.getDate()
                // date1 = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate()
                res += date0 + "-" + date1 + "</br>";
                // console.log(params[0])
                return res;
              },
            },
            series: [
              {
                name: "实际开始时间",
                type: "bar",
                stack: "timeout",
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                  },
                },
                lineStyle: {},
                data: chartData.map((item) => item.start),
              },
              {
                name: "超时",
                type: "bar",
                stack: "timeout",
                barWidth: 14, // 柱宽度
                itemStyle: {
                  normal: {
                    barBorderRadius: 25, // 柱圆角
                    color: function (params) {
                      let color = "";
                      // var colorList = ['#3E84E9','#c23531','#d4cece']; // 超时, 已完成, 待完成
                      var item = chartData.filter((item) => {
                        return item.name === params.name;
                      });
                      var status = item && item[0] && item[0].status;
                      // console.log('====', status)
                      color =
                        status === 1
                          ? "#d4cece"
                          : status === 2
                          ? "#3E84E9"
                          : "#c23531";
                      return color;
                    },
                  },
                },
                data: chartData.map((item) => item.end),
              },
            ],
          }
        })
      }
    },
    mounted() {
      this.getData()
    }
  }
</script>

<style scoped lang="scss">
  .title{
    padding: 0.625rem;
    font-size: 0.875rem;
    div{
      margin: 0.3125rem;
      border-left: 0.125rem solid #1577FF;
      padding-left: 0.3125rem;
    }
  }
</style>
